<template>
    <div class="user-management">
        <a-card :bordered="false" :bodyStyle="{padding: 0}">
            <!-- 操作按钮区域 -->
            <div class="ant-pro-table-search">
                <a-form v-bind="searchFormLayout">
                    <a-row :gutter="16">
                        <a-col :md="8" :sm="24">
                            <!-- <a-form-item label="管理机构">
                                <a-input v-model="queryParam.orgNo" />
                            </a-form-item> -->
                            <a-form-item label="管理机构">
                                <a-tree-select
                                    v-model="queryParam.orgNo"
                                    style="width: 100%"
                                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                                    :tree-data="organizationTree1"
                                    allow-clear
                                    :replaceFields="{
                                        title: 'title',
                                        key: 'key',
                                        value: 'value',
                                        children:'children',
                                    }"
                                    >
                                </a-tree-select>
                            </a-form-item>
                        </a-col>
                        <a-col :md="16" :sm="24" class="table-page-search-wrapper">
                            <div class="table-page-search-submitButtons">
                                <a-button type="primary" @click="searchTable">查询</a-button>
                                <a-button style="margin-left: 8px" @click="add">新建</a-button>
                                <!-- <a-button style="margin-left: 8px" @click="addStore">设备入库</a-button> -->
                                <a-button style="margin-left: 8px" @click="batchStore">批量导入</a-button>
                            </div>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
            <!--数据表格区域-->
            <div class="ant-pro-table-wrapper">
                <a-table
                    ref="table"
                    size="middle"
                    :rowKey="rowKey"
                    :columns="columns"
                    :dataSource="dataSource"
                    :loading="loading"
                    :pagination="pagination"
                    @change="handleTableChange"
                >
                <template slot="expandIcon">
                    <a-icon type="caret-down"/>
                </template>

                <!--数据表格-->
                <template #status-slot="text">
                    <span>{{ text | statusFilter }}</span>
                </template>
                <template #isEnable-slot="text">
                    <span>{{ text | isEnableFilter }}</span>
                </template>
                <template #example-slot="text">
                    <span>{{ text | exampleFilter }}</span>
                </template>
                <template slot="equipmentType-slot" slot-scope="record">
                    <span>{{getName(record)}}</span>
                </template>

                <template slot="action-slot" slot-scope="text, record">
                    <div style="display:flex;justify-content:space-around;align-items: center;">
                        <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm
                        title="确认要删除吗？"
                        @confirm="() => handleDel(record,'rapid/equipmentInfo/delete')">
                    <a href="javascript:">删除</a>
                    </a-popconfirm>
                    <a-switch v-model="record.checked" @change="switchChange(record)"/>
                    </div>
                </template>
                </a-table>
            </div>
        </a-card>

        <!--表单页面-->
        <div v-if="visible" >
            <a-modal
                :title="addFlag ? '新增' : '修改'"
                :visible="visible"
                @ok="handleSubmit"
                @cancel="handleClose"
                :confirmLoading="submitLoading"
                :maskClosable="false"
                :bodyStyle="{ padding: '12px 18px' }"
                :centered="true"
                width="60%"
            >
                <a-form-model
                    @submit="handleSubmit"
                    :rules="rules"
                    :model="form"
                    ref="ruleForm"
                >
                    <a-form-model-item style="display: none">
                        <a-input v-model="form.id" />
                    </a-form-model-item>
                    <a-form-model-item label="监测设备名称" prop="equipmentName">
                        <a-input placeholder="请输入" v-model="form.equipmentName" />
                    </a-form-model-item>
                    <a-form-model-item label="被监测设备名称">
                        <a-input placeholder="请输入" v-model="form.passiveMonitor" />
                    </a-form-model-item>
                    <a-form-model-item label="设备编码">
                        <a-input placeholder="请输入" v-model="form.deviceCode" />
                    </a-form-model-item>
                    <a-form-model-item label="电流负荷" prop="currentLoad">
                        <a-input type="number" placeholder="请输入" v-model="form.currentLoad" />
                    </a-form-model-item>
                    <!-- <a-form-model-item label="设备状态">
                        <a-select v-model="form.equipmentStatus">
                            <a-select-option :value="1">休眠</a-select-option>
                            <a-select-option :value="2">激活</a-select-option>
                            <a-select-option :value="3">离线</a-select-option>
                        </a-select>
                    </a-form-model-item> -->
                    <a-form-model-item label="是否启用">
                        <a-select v-model="form.isEnable">
                            <a-select-option :value="0">停用</a-select-option>
                            <a-select-option :value="1">启用</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="设备类型编码">
                        <a-select v-model="form.equipmentType">
                            <a-select-option v-for="item in typeList" :key="String(item.classifyCode)" >
                                {{item.classifyName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="所属部门">
                        <!-- <a-input placeholder="请输入" v-model="form.setupAddress" /> -->
                        <a-tree-select
                            v-model="form.orgNo"
                            placeholder="父级组织"
                            style="width: 100%"
                            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                            :tree-data="organizationTree1"
                            allow-clear
                            @change="onChange"
                            :replaceFields="{
                                title: 'title',
                                key: 'key',
                                value: 'value',
                                children:'children',
                            }"
                            >
                        </a-tree-select>
                    </a-form-model-item>
                    <a-form-model-item label="地址">
                        <a-input placeholder="请输入" v-model="form.setupAddress" @change="handleBlur" />
                    </a-form-model-item>
                    <a-form-model-item label="详细地址">
                        <a-input placeholder="请输入" v-model="form.detailAddress" :disabled="disFlag"/>
                    </a-form-model-item>
                    <a-form-model-item label="是否样机">
                        <a-select v-model="form.isExample">
                            <a-select-option :value="0">否</a-select-option>
                            <a-select-option :value="1">是</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <!-- <a-form-model-item label="起始经度">
                        <a-input v-model="form.setupLg" />
                    </a-form-model-item>
                    <a-form-model-item label="起始纬度">
                        <a-input v-model="form.setupLt" />
                    </a-form-model-item> -->
                </a-form-model>
            </a-modal>
        </div>

        <!--设备入库-->
        <div v-if="storeFlag">
            <a-modal
                :title="新增"
                :visible="visible"
                @ok="submit"
                @cancel="storeClose"
                :maskClosable="false"
                :bodyStyle="{ padding: '12px 18px' }"
                :centered="true"
                width="60%"
            >
            </a-modal>
        </div>

        <!--批量入库-->
        <div v-if="batchFlag">
            <a-modal
                title="批量导入"
                :visible="visiFlag"
                @cancel="handleCancel"
                >
                <a href="/static/导入模板" download="导入模板.xls">下载模板</a>
                <a-upload
                        name="file"
                        :multiple="true"
                        :action="$baseUrl+'/rapid/equipmentInfo/upload'"
                        :headers="headers"
                        @change="handleChange"
                    >
                    <a-button> <a-icon type="upload" /> 选择文件并上传 </a-button>
                </a-upload>
            </a-modal>
        </div>
    </div>
</template>

<script>
import Cookie from 'js-cookie'
import formMinxins from "./formMinxins";
const isEnableMap = {
    0: {status: "0",text: "停用"},
    1: {status: "1",text: "启用"},
};
const statusMap = {
    0: {status: "0",text: "未激活"},
    1: {status: "1",text: "休眠"},
    2: {status: "2",text: "激活"},
    3: {status: "3",text: "离线"},
};
const exampleMap = {
    0: {status: "0",text: "否"},
    1: {status: "1",text: "是"},
};
export default {
    name:'bookManagement',
    mixins: [formMinxins],
    data(){
        return{
            chekced:false,
            columns:[
                {
                    title: "序号",
                    dataIndex: "index",
                    align: "center",
                },
                {
                    title: "监测设备名称",
                    dataIndex: "equipmentName",
                    align: "center",
                },
                {
                    title: "被监测设备名称",
                    dataIndex: "passiveMonitor",
                    align: "center",
                },
                {
                    title: "设备编码",
                    dataIndex: "deviceCode",
                    align: "center",
                },
                {
                    title: "电流负荷(A)",
                    dataIndex: "currentLoad",
                    align: "center",
                },
                 {
                    title: "设备状态",
                    dataIndex: "equipmentStatus",
                    align: "center",
                    scopedSlots: { customRender: "status-slot" },
                },
                 {
                    title: "启用状态",
                    dataIndex: "isEnable",
                    align: "center",
                    scopedSlots: { customRender: "isEnable-slot" },
                },
                 {
                    title: "设备类型编码",
                    dataIndex: "equipmentType",
                    align: "center",
                    scopedSlots: { customRender: "equipmentType-slot" },
                },
                 {
                    title: "地址",
                    dataIndex: "setupAddress",
                    align: "center",
                },
                 {
                    title: "所属单位",
                    dataIndex: "orgNo",
                    align: "center",
                },
                {
                    title: "是否样机",
                    dataIndex: "isExample",
                    align: "center",
                    scopedSlots: { customRender: "example-slot" },
                },
                // {
                //     title: "起始经度",
                //     dataIndex: "setupLg",
                //     align: "center",
                // },
                // {
                //     title: "起始纬度",
                //     dataIndex: "setupLt",
                //     align: "center",
                // },
                {
                    title: '操作',
                    dataIndex: 'action',
                    align: "center",
                    width: '200px',
                    scopedSlots: { customRender: 'action-slot' }
                }
            ],
            submitLoading: false,
            organizationTree:[],
            organizationTree1:[],
            form: {
                id:"",
                equipmentName:"",
                passiveMonitor:"",
                deviceCode:"",
                equipmentStatus:"1",
                isEnable:"",
                equipmentType:"",
                setupAddress:"",
                orgNo:"",
                setupLg:"",
                setupLt:"",
                allAddress:"",
                detailAddress:"",
                isExample:"",
                lx:2,  //休眠
                currentLoad: ''
            },
            dataSource:[],//列表
            loading: false,// 数据加载动画
            rowKey: 'id',// 主键 默认id
            pagination: {// 分页器设置
                total: 0,
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                }
            },
            rules:{
                equipmentName:[{required: true, message: '请输入监测设备名称', trigger: 'blur'}],
                currentLoad:[{required: true, message: '请输入电流负荷', trigger: 'blur'}],
            },
            addFlag:true,
            visible:false,
            typeList:[],
            disFlag:true,
            storeFlag:false,
            batchFlag:false,
            visiFlag:false,
            headers:{
                accessToken:Cookie.get('accessToken')
            }
        }

    },
    filters: {
        statusFilter(type) {
            return statusMap[type].text;
        },
        isEnableFilter(type) {
            return isEnableMap[type].text;
        },
        exampleFilter(type){
            return exampleMap[type].text;
        }
    },
    created(){
        this.getDataUrl = "/rapid/equipmentInfo/getPage";
        this.searchKey = "equipmentInfo";
        // this.loadData();
        this.init();
        this.initOrg();
    },
    mounted(){
        this.getBookList();
        this.reloadTable()
    },
    methods:{
        //单个
        addStore(){

        },
        submit(){

        },
        storeClose(){

        },
        //文件批量
        batchStore(){
            this.batchFlag = true;
            this.visiFlag = true;
        },
        handleOk(){},
        handleCancel(){
            this.batchFlag = false;
            this.visiFlag = false;
        },
        handleChange(){},
        //停用启用
        switchChange(record){
            const index = this.dataSource.findIndex(item => item.id == record.id)
            let data = {
                ...record,
                checked:record.checked
            }
            if(index != -1) {
                this.$set(this.dataSource, index, data)
            }
            if(record.checked){
                const data = {
                    snid:record.deviceCode,
                    lx:1
                }
                this.$http('/rapid/equipmentInfo/actDevice',data).then(res =>{
                    if(res.code === 200){
                        this.$message.success("");
                        this.reloadTable();
                    }
                })
            }else{
                const data = {
                    snid:record.deviceCode,
                    lx:2
                }
                this.$http('/rapid/equipmentInfo/actDevice',data).then(res =>{
                    if(res.code === 200){
                        this.$message.success("");
                        this.reloadTable();
                    }
                })
            }
        },
        //获取select-tree数据，封装好
        init(){
            this.$http('/rapid/org/getOrgSelectTree').then(res =>{
                if(res.code === 200){
                    this.organizationTree = res.result;
                }
            })
        },
        initOrg(){
            this.$http('/rapid/org/getSelfTree').then(res =>{
                if(res.code === 200){
                    this.organizationTree1 = res.result;
                }
            })
        },
        getName(record){
            for(let i=0;i<this.typeList.length;i++){
                if(record == this.typeList[i].classifyCode){
                    return this.typeList[i].classifyName;
                }
            }
        },
        handleTableChange (pagination) {
            this.pagination = pagination;
            this.reloadTable()
         },
        //选择
        onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        searchTable(){
            this.pagination.current = 1;
            this.reloadTable();
        },
        // 查询操作
        reloadTable() {
            this.tableShow = true
            const data = {
                pageVo: {
                    pageNumber: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                },
                equipmentInfo: {
                    ...this.queryParam,
                },
            };
            this.$http('/rapid/equipmentInfo/getPage',data).then(res =>{
                if(res.code === 200){
                    this.dataSource = res.result.records;
                    this.dataSource.forEach((item, index) => {
                        item.index = index + 1
                        item.checked = item.lx == 1 ? true : false
                    })
                    this.pagination.total = !isNaN(res.result.total) ? Number(res.result.total) : 0
                }
            })
        },
        //编辑
        handleEdit(record){
            this.visible = true;
            this.addFlag = false;
            this.form = record;
            this.init();
        },
        //新增
        add () {
            this.visible = true;
            this.addFlag = true;
            this.initOrg();
        },
        handleSubmit(){
            this.$refs.ruleForm.validate((valid) =>{
                if(valid){
                    this.$http('/rapid/equipmentInfo/saveOrUpdate',this.form).then(res =>{
                        if(res.code === 200){
                            this.$message.success('更新完成！')
                            this.handleClose();
                        }
                    })
                }else{
                    this.$message.error("请填写必填项")
                    return false;
                }
            })
        },
        handleClose(){
            this.visible = false;
            this.form = {};
            //关闭之后刷新列表
            this.reloadTable();
        },
        onChange(val){
            console.log("val",val)
            const data ={
                orgNo:val
            }
            this.$http('/rapid/org/contactAddress',data).then(res =>{
                if(res.code === 200){
                    this.form.allAddress = res.result;
                    this.form.detailAddress=this.form.allAddress+this.form.setupAddress;
                }
            })
        },
        handleBlur(){
            this.form.detailAddress=this.form.allAddress+this.form.setupAddress;
        },
        //查询设备类型码表
        getBookList(){
            this.$http('/rapid/equipmentClassify/getClassifyList',{}).then(res =>{
                if(res.code === 200){
                    this.typeList=res.result;
                    console.log('this.typeList',this.typeList)
                }
            })
        },
        downloadExcel () {
            let aLink = document.createElement('a')
            aLink.href = '../static/导入模板.xlsx'
            aLink.download = '导入模板.xlsx'
            aLink.style.display = 'none'
            aLink.click()
        }

    }
}
</script>


<style scoped lang="less">
.user-management {
  .ant-pro-table-search {
    background-color: #fff;
    padding: 16px 24px 0;
    .table-page-search-wrapper {
      text-align: right;
      .table-page-search-submitButtons {
        padding-top: 3.5px;
        margin-bottom: 16px;
      }
    }
  }
  .ant-pro-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
  }
}

.expandIcon {
  margin-right: 8px
}

.leafNode {
  padding-left: 14px;
}
</style>
